<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Recognizers-Text | Browser Sandbox</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- IE11 Polyfill to support ES2015 features -->
    <script type="text/javascript">
        if(/MSIE \d|Trident.*rv:/.test(navigator.userAgent))
            document.write('<script src="https://cdnjs.cloudflare.com/ajax/libs/core-js/2.5.1/shim.min.js"><\/script>');
    </script>
    <!-- The Recognizers-Text Bundle for the browser -->
    <script src="scripts/recognizers-text-suite.browser.js"></script>
</head>

<body>
    <h1>Browser Test</h1>

    <Label>Language: </Label>
    <select id="language">
            <option value="en-us" selected="selected">English</option>
            <option value="es-es">Spanish</option>
            <option value="fr-fr">French</option>
            <option value="pt-br">Portuguese</option>
            <option value="zh-cn">Chinese</option>
    </select>

    <br />
    <br />

    <Label>Recognizer: </Label>
    <select id="recognizer">
            <option value="Number" selected="selected">Number</option>
            <option value="NumberOrdinal">Number - Ordinal</option>
            <option value="NumberPercentage">Number - Percentage</option>
            <option value="NumberWithUnitCurrency">Number with Unit - Currency</option>
            <option value="NumberWithUnitTemperature">Number with Unit - Temperature</option>
            <option value="NumberWithUnitDimension">Number with Unit - Dimension</option>
            <option value="NumberWithUnitAge">Number with Unit - Age</option>
            <option value="DateTime">DateTime</option>
            <option value="Boolean">Boolean</option>
    </select>

    <br />
    <br />

    <form id="parse">
        <label>
            Input:
            <input type="text" id="input" value="I have twenty apples" size="40" />
            <input type="submit" id="submit" value="Parse" />
        </label>
    </form>

    <br /> Result:
    <pre id="output">
        ...
    </pre>

    <script>
        document.addEventListener("DOMContentLoaded", function() {

            // bind ui
            document.getElementById("parse").addEventListener("submit", function (e) {
                e.preventDefault();
                var result = parse(document.getElementById("input").value);

                var output = JSON.stringify(result, null, "\t");
                document.getElementById("output").innerHTML = output;
            });

            // first time trigger
            document.getElementById("submit").click();

            // parse input using specified recognizer
            function parse(input) {
                var recognizeFunction;
                var language = document.getElementById("language");
                var recognizer = document.getElementById("recognizer");
                var culture = language.options[language.selectedIndex].value;
                var selectedRecognizer = recognizer.options[recognizer.selectedIndex].value;

                try {
                    switch (selectedRecognizer) {
                        case "Number":
                            recognizeFunction = RecognizersText.recognizeNumber;
                            break;
                        case "NumberOrdinal":
                            recognizeFunction = RecognizersText.recognizeOrdinal;
                            break;
                        case "NumberPercentage":
                            recognizeFunction = RecognizersText.recognizePercentage;
                            break;
                        case "NumberWithUnitCurrency":
                            recognizeFunction = RecognizersText.recognizeCurrency;
                            break;
                        case "NumberWithUnitTemperature":
                            recognizeFunction = RecognizersText.recognizeTemperature;
                            break;
                        case "NumberWithUnitDimension":
                            recognizeFunction = RecognizersText.recognizeDimension;
                            break;
                        case "NumberWithUnitAge":
                            recognizeFunction = RecognizersText.recognizeAge;
                            break;
                        case "DateTime":
                            recognizeFunction = RecognizersText.recognizeDateTime;
                            break;
                        case "Boolean":
                            recognizeFunction = RecognizersText.recognizeBoolean;
                            break;
                    }
                } catch(err) {
                    return "Specified model is not yet supported: " + err.message;
                }

                // Parse
                return recognizeFunction(input, culture);
            }

        });
    </script>
</body>

</html>